<template>
	<view class="base">
		<view class="main">
			<view class="icon"></view>
			<view class="head">
				LOGIN
			</view>
			<view class="user">
				<!-- <Input placeholder='用户名' value={name} onChange={(e) => { setName(e.target.value) }} /> -->
				<input v-model="username" type="text" placeholder='用户名' style="padding-left: 10px;" />
			</view>
			<view class="user">
				<!-- <Input.Password placeholder='密码' iconRender={(visible) => (visible ? <EyeTwoTone /> : <EyeInvisibleOutlined />)}
	          value={password}
	          onChange={(e) => { setPassword(e.target.value) }}
	        /> -->
				<input v-model="password" password="true"  placeholder="密码" style="padding-left: 10px;" />
			</view>
			<button class="login" @click="loginEvent">登录</button>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	
	import { login } from '../../api/api';

	const username = ref('')
	const password = ref('')
	
	function loginEvent(){
		// console.log(username.value,password.value)
		login({
			username:username.value,
			password:password.value
		}).then(response=>{
			if(response.message=='success'){
				uni.setStorageSync('token',response.token)
	
				uni.setStorageSync('info',response.info[0].nickName)
				uni.navigateTo({
					url:'/pages/main/main'
				})
			}else{
				uni.showModal({
					title: '提示',
					content: '账号或密码错误',
					showCancel: false,
					success: res => {
						
					},
					fail: () => {},
					complete: () => {}
				});
			}
		})
	}
	
</script>

<style scoped>
	.base {
		background-image: linear-gradient(to right, #fbc2eb, #a6c1ee);
		width: 100vw;
		height: 100vh;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		position: relative;
	}

	.main {
		background-color: white;
		width: 80vw;
		height: 80vh;
		border-radius: 30px;
		display: flex;
		flex-direction: column;
		align-items: center;
		/* justify-content: center; */
		gap: 5vh;
	}

	.head {
		font-weight: 600;
		font-size: 24px;
	}

	.user {
		width: 45vw;
		border: 1px solid #c2c2c2;
		border-radius: 20px;
	}

	.icon {
		background-image: url('../../static/icon.png');
		background-size: cover;
		width: 20vw;
		height: 20vw;
		margin-top: 15vh;
	}

	.login {
		width: 20vw;
	}
</style>